<template>
  <!-- 新增弹窗组件 -->
  <el-dialog title="新增员工" @close="cancel" :visible="showDialog">
    <el-form
      ref="deptForm"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="姓名" prop="username">
        <el-input
          v-model="formData.username"
          placeholder="1-30个字符"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input
          v-model="formData.mobile"
          placeholder="请输入手机号"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="formData.timeOfEntry"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" placeholder="请选择">
          <el-option
            v-for="item in hireType"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input
          v-model="formData.workNumber"
          placeholder="1-20个字符"
          style="width: 50%"
        />
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input
          readonly
          @focus="openTree"
          v-model="formData.departmentName"
          placeholder="请选择"
          suffix-icon="el-icon-arrow-down"
          style="width: 40%"
        >
        </el-input>
        <el-tree
          class="treebox"
          @node-click="nodeclick"
          :props="defaultProps"
          :data="treedata"
          :expand-on-click-node="false"
          accordion
          v-if="treeshow"
        ></el-tree>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="formData.correctionTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button @click="submit" type="primary" size="small">确定</el-button>
        <el-button @click="cancel" size="small">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils/index";
import { addEmployee } from "@/api/employees";
import employees from "@/utils/constant/employees";
import {validateMobile} from '@/utils/validate'
export default {
  props: ["showDialog"],
  data() {
    return {
      // 控制树形结构的显示与隐藏
      treeshow: false,
      //聘用形式
      hireType: employees.hireType,
      // 树形结构的数据源
      formData: {
        username: "",
        mobile: "",
        formOfEmployment: "",
        workNumber: "",
        departmentName: "",
        timeOfEntry: "",
        correctionTime: "",
      },

      //部门结构
      treedata: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 表单元素的验证规则
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }, 
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {validator:validateMobile}
        ],
        timeOfEntry: [
          { required: true, message: "入职时间不能为空", trigger: "blur" },
        ],
        formOfEmployment: [
          { required: true, message: "聘用形式不能为空", trigger: "blur" },
        ],
        workNumber: [
          { required: true, message: "工号不能为空", trigger: "blur" },
        ],
        departmentName: [
          { required: true, message: "部门不能为空", trigger: "change" },
        ],
        correctionTime: [
          { required: true, message: "转正时间不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //输入框获取焦点的方法
    openTree() {
      this.treeshow = true;
    },
    nodeclick(e) {
      this.formData.departmentName = e.name;
      this.treeshow = false;
    },
    submit() {
      this.$refs.deptForm.validate(async (res) => {
        if (res) {
          await addEmployee(this.formData);
          this.$message.success("新增员工成功");
          this.$emit("update:showDialog", false);
          this.$emit("updatedata");
          // this.$parent.getEmployeeList()
          this.formData = {
            username: "",
            mobile: "",
            formOfEmployment: "",
            workNumber: "",
            departmentName: "",
            timeOfEntry: "",
            correctionTime: "",
          };
        }
      });
    },
    cancel() {
      this.$refs.deptForm.resetFields();
      this.formData = {
        username: "",
        mobile: "",
        formOfEmployment: "",
        workNumber: "",
        departmentName: "",
        timeOfEntry: "",
        correctionTime: "",
      };
      this.$emit("update:showDialog", false);
    },
    async getDepartments() {
      const res = await getDepartments(); //获取部门
      // 调用树形结构
      this.treedata = tranListToTreeData(res.depts, "");
    },
  },
  created() {
    this.getDepartments();
  },
};
</script>

<style lang="scss"  scoped>
.treebox {
  position: absolute;
  top: 45px;
  width: 40%;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 8px #e4e7ed;
  z-index: 999;
}
</style>